<template>
    <div class="invoices-manager">
        <div class="noworder-title">
            <span>发票管理</span>
        </div>
        <div class="table-invoices">
            <lar-table
                    model="money.invoice"
                    canAdd="canAdd"
                    action="base.table"
                    style="margin-top: 20px">
                <div slot="invoice" slot-scope="props">
                    <div class="expand-box">
                        <el-row>
                            <el-col :span="6">
                                <span class="title">申请状态:</span><span style="color: #ff9900;"> {{props.data.data.row.status_link}}</span>
                            </el-col>
                            <el-col :span="6">
                                <span class="title">发票号:</span><span> {{props.data.data.row.invoice_number}}</span>
                            </el-col>
                            <el-col :span="6" v-if="props.data.data.row.type == 2">
                                <span class="title">邮寄公司:</span><span> {{props.data.data.row.mailing_name}}</span>
                            </el-col>
                            <el-col :span="6" v-if="props.data.data.row.type == 2">
                                <span class="title">邮寄单号:</span><span> {{props.data.data.row.mailing_number}}</span>
                            </el-col>
                        </el-row>
                        <div style="padding: 6px 0 4px 0">
                            <span v-if="props.data.data.row.type == 1"><span class="title">发票类型:</span>电子发票</span>
                            <span v-if="props.data.data.row.type == 2 && props.data.data.row.tax_type == 1"><span class="title">发票类型:</span>常规发票</span>
                            <span v-if="props.data.data.row.type == 2 && props.data.data.row.tax_type == 2"><span class="title">发票类型:</span>增值税专用发票</span>
                            <span v-if="props.data.data.row.type == 2 && props.data.data.row.tax_type == 3"><span class="title">发票类型:</span>增值税普通发票</span>
                        </div>
                        <el-row style="line-height: 26px;color: #666;">
                            <el-col :span="12" v-if="props.data.data.row.type == 2 && props.data.data.row.tax_type !== 1">
                                <el-col :span="24"><span class="title">发票详情:</span></el-col>
                                <el-col :span="24"><span>公司名称:</span><span> {{props.data.data.row.company_name}}</span></el-col>
                                <el-col :span="24"><span>纳税人识别号:</span><span> {{props.data.data.row.tax_number}}</span></el-col>
                                <!--<el-col :span="24"><span>地址电话:</span><span> {{props.row.content}}</span></el-col>-->
                                <el-col :span="24"><span>开户行及账号:</span><span> {{props.data.data.row.bank}} {{props.data.data.row.bank_number}}</span></el-col>
                            </el-col>
                            <el-col :span="12" v-else>
                                <el-col :span="24"><span class="title">发票详情:</span></el-col>
                                <el-col :span="24"><span>开票人/单位:</span><span> {{props.data.data.row.company_name}}</span></el-col>
                                <el-col :span="24"><span>税号:</span><span> {{props.data.data.row.tax_number}}</span></el-col>
                                <el-col :span="24"><span>发票备注:</span><span> {{props.data.data.row.content}}</span></el-col>
                                <el-col :span="24"><span>发票金额:</span><span> {{props.data.data.row.price}}</span></el-col>
                            </el-col>

                            <el-col :span="12" v-if="props.data.data.row.type == 1">
                                <el-col :span="12"><span class="title">接收方式:</span></el-col>
                                <el-col :span="24"><span>邮件地址:</span><span> {{props.data.data.row.address}}</span></el-col>
                                <el-col :span="24"><span>手机号:</span><span> {{props.data.data.row.phone}}</span></el-col>
                                <el-col :span="24">
                                    <div style="display: flex;align-items: center">
                                        <div>
                                            <viewer :images="props.data.data.row.picture">
                                                <img v-for="src in props.data.data.row.picture" :src="src" :key="src" width="100"  v-if="src.indexOf('.pdf') == -1">
                                            </viewer>
                                        </div>
                                        <div >
                                           <span v-for="(src,index) in props.data.data.row.picture" :key="index"  v-if="src.indexOf('.pdf') !== -1">
                                                <div><a style="color: rgb(45, 140, 240);" :href="src" target="_blank">预览pdf图片</a></div>
                                            </span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-col>
                            <el-col :span="12" v-else>
                                <el-col :span="12"><span class="title">接收方式:</span></el-col>
                                <el-col :span="24"><span>邮件收件人:</span><span> {{props.data.data.row.name}}</span></el-col>
                                <el-col :span="24"><span>邮寄电话:</span><span> {{props.data.data.row.phone}}</span></el-col>
                                <el-col :span="24"><span>邮件地址:</span><span> {{props.data.data.row.address}}</span></el-col>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </lar-table>
        </div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
            }
        },

        mounted() {
        },
        methods: {

        }
    }
</script>
<style lang="less">
    .el-upload-list--picture-card .el-upload-list__item{
        width: 100px;
        height: 100px;
    }
    .el-upload--picture-card{
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

</style>
<style lang="less">
    .invoices-manager{
        background-color: #fff;
        overflow: hidden;
        margin: 10px 0 0 10px;

        .el-table__expanded-cell[class*=cell]{
            padding: 0px;
        }
        .noworder-title{
            font-size: 16px;
            padding: 10px 0 6px 16px;
            margin-bottom: 2px;
            border-bottom: 2px solid #f4f4f4;
        }
        .table-invoices{
            padding:0 20px;
            .expand-box{
                background-color:#f8f8f9;
                padding: 20px 50px;
                font-size: 15px;
                .title{
                    font-weight: 600;
                    color: #000;
                }
            }
        }

    }
</style>

